<template>
    <div class="document">
        <div class="select" v-if="active===0">
            <el-header class="title" style="margin: 50px 0 0 50px">
                案号：{{law.caseNo}}
            </el-header>

            <div class="btn-box">
                <el-button type="primary" class="btn" @click="active++">自动生成模式</el-button>
                <el-button type="primary" class="btn" @click="active+=2">手动上传模式</el-button>
            </div>
            <div class="btn-box" style="margin-top: 100px">
                <el-button type="primary" @click="continueLaw">暂不申请文书，下一步</el-button>
            </div>
        </div>

        <auto :law="law" v-if="active===1" :active="active" @completed="handleCompleted" @back="back"></auto>
        <manual :law="law" v-if="active===2" :active="active" @back="back"></manual>
    </div>
</template>

<script>
    //加载自动生成组件
    const Auto = () => import('../Yongyin/Auto.vue')
    //加载手动上传组件
    const Manual = () => import('../Yongyin/Manual.vue')

    export default {
        props:['law'],
        data() {
            return {
                active:0
            }
        },
        methods:{
            handleCompleted(){
                this.$emit('completed')
            },
            back(){
                this.active = 0
            },
            //继续下一步的方法
            continueLaw(){
                this.$emit('completed')
            }
        },
        components:{
            Auto,Manual
        }
    }
</script>

<style scoped>
    .document{
        width: 100%;
    }
    .title{
        font-size: 20px;
    }
    .btn-box{
        margin-left: 70px;
    }
    .btn{
        width: 400px;
        font-size: 20px;
        height: 150px;
    }
</style>